<script type="text/javascript" src="/js/buyer_create.js"></script>
<ol class="breadcrumb">
    <li><a href="#">系统中心</a></li>
    <li><a href="/user/list">用户管理</a></li>
    <li>新增用户</li>
</ol>
<div class="panel panel-default">
    <div class="panel-heading">
        <span class="glyphicon glyphicon-pencil"></span>
        <span class="panel-title">请填写用户信息</span>
    </div>
    <div class="panel-body">
        <form action="/user/create" method="post" name="form3" class="form-horizontal">
            <div class="alert alert-warning" role="alert"><span class="text-red">*</span>项为必填项</div>
            <div class="form-group">
                <label class="control-label col-xs-2"><span class="text-red">*</span>用户名：</label>

                <div class="col-xs-9">
                    <input type="text" class="form-control" id="username" name="username" placeholder="请填用户名"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2"><span class="text-red">*</span>登陆密码：</label>

                <div class="col-xs-9">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请填写登陆密码"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">用户公司：</label>

                <div class="col-xs-9">
                    <input type="text" class="form-control" name="company" placeholder="请填写用户公司"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">联系人：</label>

                <div class="col-xs-9">
                    <input type="text" class="form-control" id="name" name="name" placeholder="请填写联系人"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">联系电话：</label>

                <div class="col-xs-9">
                    <input type="text" class="form-control" name="phone" placeholder="请填写联系电话"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">授权角色：</label>

                <div class="col-xs-9">
                    <div id="tree"></div>
                </div>
            </div>
            <div class="control-group">
                <div class="col-xs-9 col-xs-offset-2">
                    <input type="submit" class="btn btn-success col-xs-2"
                           id="sub_btn">
                </div>
            </div>
        </form>
    </div>
</div>
<link rel="stylesheet" href="/lib/bootstrap-treeview/dist/bootstrap-treeview.min.css"/>
<script type="text/javascript" src="/lib/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript">

    $(function () {

        $.get('/user/role/ajaxlist', function (res) {
            if (res.success) {
                initTree(res.data);
            }
        });

        function initTree(roles) {

            function check(roles) {
                var roleNodes = [];
                $.each(roles, function (key, role) {
                    var roleNode = $.extend({
                        icon: "glyphicon glyphicon-unchecked",
                        selectedIcon: "glyphicon glyphicon-check",
                        selectable: true,
                    }, {
                        _id: role._id,
                        text: role.name
                    });
                    roleNodes.push(roleNode);
                });
                return roleNodes;
            }

            $.when(check(roles)).done(function (roleNodes) {

                //初始化树
                var $checkableTree = $('#tree').treeview({
                    data: roleNodes,
                    levels: 4,
                    multiSelect: true,
                    collapseIcon: 'glyphicon glyphicon-collapse-up',
                    expandIcon: 'glyphicon glyphicon-collapse-down',
                    onNodeSelected: function (event, node) {
                        $('form[name="form3"]').append('<input type="hidden" name="roles" value="' + node._id + '"/>');
                    },
                    onNodeUnselected: function (event, node) {
                        $('input[value="' + node._id + '"]').remove();
                    }
                });
            });
        }
    });

</script>
<style rel="stylesheet">
</style>